<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8">
		<title>晒图页面</title>
			<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0" >
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<style type="text/css">
		body{
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    font-size: 17px;
			    line-height: 21px;
			    color: #000;
			    margin: 0px;
			    padding: 0px;
			}
			
		div.showtitle{
			width:100%;
			height: 40px;
			background: chartreuse;
		}
		
		div.showtitle span{
			line-height: 40px;
			text-align: center;
		    font-size: 30px;
		}
		
		.col-sm-6{
			float: left;
			width: 200px;
		}
		
		.fa-plus-circle{
			position: absolute;
			top: 0px;
			right: 0px;
		}
		
		 .nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
				
				.mui-bar-nav {
				    top: 0;
				    -webkit-box-shadow: 0 1px 6px #ccc;
				    box-shadow: 0 1px 6px #ccc;
				}
				
				.mui-bar {
				    position: fixed;
				    z-index: 10;
				    right: 0;
				    left: 0;
				    height: 44px;
				    padding-right: 10px;
				    padding-left: 10px;
				    border-bottom: 0;
				    background-color:RGB(88,88,88);
				}
				
				.mui-bar-nav.mui-bar .mui-icon {
				    /*margin-right: -10px;*/
				    margin-left: -10px;
				    padding-right: 10px;
				    padding-left: 10px;
				}
				.mui-bar .mui-icon {
				    font-size: 24px;
				    position: relative;
				    z-index: 20;
				    padding-top: 10px;
				    padding-bottom: 10px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.mui-pull-left {
				    float: left;
				}
				a {
				    text-decoration: none;
				    color: #FC605A;
				}
				a {
				    background: 0 0;
				}
				
				.mui-bar .mui-title {
				    right: 201px;
				    left: 40px;
				    top: 4px;
				    display: inline-block;
				    overflow: hidden;
				    width: auto;
				    margin: 0;
				    text-overflow: ellipsis;
				}
				.mui-title {
				    font-size: 17px;
				    font-weight: 500;
				    line-height: 44px;
				    position: absolute;
				    display: block;
				    width: 100%;
				    margin: 0 -10px;
				    padding: 0;
				    text-align: center;
				    white-space: nowrap;
				    color: #fff;
				}
				
				.mine-photo{
			    	width: 100%;
				    background-image: url(img/curry.jpg);
				    height: 18rem;
				    background-repeat: no-repeat;
				    text-align: center;
				    position: relative;
				    color: #fff;
				    width: 320px;
				    height: 320px;
			    }
			    
			    .mine-photo img {
				    width: 80px;
				    height: 80px;				    
				    border: solid 1px #fff;
				    margin-top: 86%;
				    margin-right: -67%;
				}
				.empty{
					width: 100%;
					height: 36px;
				}
				
				.userid{
					position: absolute;
					left: 30px;
				}
				.title{
					position: absolute;
					left: 87px;
					top: 32px;
				}
				
				.thumbnail{
					position: absolute;
					left: 87px;
					top: 68px;
				}
				
				div.col-sm-6.col-md-3{
					width: 100%;
				}
				
				p.renwu{
					width: 10px;
					height: 10px;
					position: absolute;
					left: 0px;
				}
				
				p.title{
				    position: absolute;
				    top: 27px;
				    left: 80px;
			    }
			    img.pic{
			    	position: absolute;
			    	top: 52px;
			    	left: 80px;
			    }
			    
			    ul{
			    	width: 100%;
			    	height: 200px;
			    	float: right;
			    }
			    
			    li{
			    	list-style: none;
			    }
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><img src="img/left_fri.png"/></a>
			<h1 class="mui-title">朋友圈</h1>
			<a class="rig_shai" id="rem_s" href="board.html" 
				style="margin-right: 2%;position: absolute; top: 5px; right: 3%;"><img src="img/camera_fill.png"/></a>
		</header>
		
		<div class="mine-photo min-photo-bgimg">
					<img src="img/curry2.jpg" class="picture">
		</div>
		
		
		<div class="empty">
			
		</div>
         
         
         <div class="row">
    <div class="col-sm-6 col-md-3">   
    	 <span class="userid"></span>
    	 <span class="title"></span>
         <img src="" class="active_img" id="active_img">
    </div>
</div>

<div class="nav-footer">
			<a class="" href="index.html">
				<span><img src="img/home.png"/></span>
				<span class="mui-tab-label">联盟</span>
			</a>
			<a href="trail.html">
				<span><img src="img/sport.png"/></span>
				<span class="mui-tab-label">训练</span>
			</a>
			<a href="showpicture.html">
				<span><img src="img/picture.png"/></span>
				<span class="mui-tab-label">晒图</span>
			</a>
			<a class="icon-active" href="club.html">
				<span><img src="img/clubs.png"/></span>
				<span class="mui-tab-label">俱乐部</span>
			</a>
			<a href="mine.html">
				<span><img src="img/mine.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</div>
		
<script type="text/javascript">
	$(function() {
var url1="http://172.24.10.175/workout/api.php/lists/mod/shaitu";
	//综合
	$.ajax({
		type : 'post',
		url : url1,
		cache : false,
		dataType: 'jsonp',
		success : function(data) {
			for (var i = 0; i < data.length/1.7; i++) {
				var imgsrc='http://172.24.10.175/workout/Uploads/'+data[i]['thumb0'];
				var id=data[i]['id'];
				$('.row').append("<ul><li><a href='picturedetail.html?id="+id+"'><div class='col-sm-6 col-md-3'><img class='pic' src="+imgsrc+">"+"<p class='title'>"+data[i]['title']+"</p>"+" <p class='renwu'>"+data[i]['userid']+"</p>"+"</div>"+"</a>"+"</li>"+"</ul>");
			}
	}
	});
});
</script>
	</body>
</html>
